<script setup lang="ts">
import { computed, ref, watchEffect, onMounted, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { avatarList } from '@/common'
import { getLabelList } from '@/api/labelManager'
import type { UpdateUserInfoDialogProps } from './com.interface'
import type { UserResponse } from '@interface'

defineOptions({
  name: 'UpdateUserInfo_component',
})

interface LabelList {
  id: number
  title: string
}

const userStore = useUserStore()

const visible = ref<boolean>(false)

const { userInfo = {} } = defineProps<UpdateUserInfoDialogProps>()

const user = reactive<Partial<UserResponse>>({
  ...userInfo,
})

// 获取标签列表
const labelList = ref<LabelList[]>([])

onMounted(async () => {
  const res = await getLabelList()
  labelList.value = res
})

watchEffect(() => {
  // 重新创建新对象
  Object.assign(user, userInfo)
})

const userAvatar = computed(() => {
  return avatarList.find((item) => item.id === user.avatar)?.avatar
})

const emit = defineEmits<{
  (e: 'closeProcessor'): void
  (e: 'confirmProcessor', userInfo: Partial<UserResponse>): void
  (e: 'openAvatarDialog', avatar: string | undefined): void
}>()

// 关闭弹窗的方法
const closeProcessor = () => {
  visible.value = false
  // 重新创建新对象
  Object.assign(user, {})
  emit('closeProcessor')
}

// 向外部暴露打开和关闭方法
defineExpose({
  open: () => {
    visible.value = true
  },
  close: closeProcessor,
})

const handleExit = () => {
  closeProcessor()
  // 清除用户信息
  userStore.resetStore()
}
</script>

<template>
  <ElDialog
    :model-value="visible"
    title="个人信息设置"
    width="50%"
    class="user-update-info-dialog-component"
    @close="closeProcessor"
  >
    <div class="one-container">
      <ElForm
        :model="user"
        style="width: 70%; margin: 0 auto"
        label-width="70"
        label-position="left"
      >
        <div class="avatar-row">
          <div
            class="avatar-edit"
            @click="emit('openAvatarDialog', user.avatar)"
          >
            <ElAvatar :src="userAvatar" :size="70" fit="cover"></ElAvatar>
            <div class="avatar-edit-post">
              <ElIcon>
                <Plus />
              </ElIcon>
            </div>
          </div>
        </div>
        <ElFormItem label="账号">
          <ElInput
            v-model="user.account"
            disabled
            style="width: 100%"
          ></ElInput>
        </ElFormItem>
        <ElFormItem label="昵称">
          <ElInput
            v-model="user.nickName"
            style="width: 100%"
            placeholder="取一个自己喜欢的名称吧。"
            maxlength="12"
            show-word-limit
          ></ElInput>
        </ElFormItem>
        <ElFormItem label="签名">
          <ElInput
            v-model="user.signature"
            style="width: 100%"
            placeholder="编辑个签，展示我的独特态度"
            maxlength="40"
            show-word-limit
          ></ElInput>
        </ElFormItem>
        <ElFormItem label="标签">
          <ElSelect v-model="user.tags" multiple style="width: 100%">
            <ElOption
              v-for="item in labelList"
              :key="item.id"
              :label="item.title"
              :value="item.title"
            />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="生日">
          <el-date-picker
            v-model="user.birthday"
            type="date"
            placeholder="设置生日"
            style="width: 100%"
            value-format="YYYY-MM-DD"
          />
        </ElFormItem>
      </ElForm>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <ElPopconfirm title="是否登出？" @confirm="handleExit">
          <template #reference>
            <el-button type="danger">登出</el-button>
          </template>
        </ElPopconfirm>

        <el-button @click="closeProcessor">取消</el-button>
        <el-button type="primary" @click="emit('confirmProcessor', user)">
          确定
        </el-button>
      </div>
    </template>
  </ElDialog>
</template>

<style scoped lang="scss">
.user-update-info-dialog-component {
  .one-container {
    width: 100%;
    height: 300px;

    .avatar-row {
      width: 100%;
      height: 70px;
      display: flex;
      justify-content: center;
      margin-bottom: 15px;

      .avatar-edit {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        cursor: pointer;
        position: relative;

        &:hover .avatar-edit-post {
          visibility: visible;
        }

        .avatar-edit-post {
          width: inherit;
          height: inherit;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.6);
          visibility: hidden;
        }
      }
    }
  }

  .dialog-footer {
    margin-top: 15px;
  }
}
</style>
